<!--  eslint-disable prettier/prettier -->
<template>
  <div class="detail">
    <div class="logo">
      <img src="https://img.kerry.top/FjVSHR6nOYM2qi5UkYidAs2eT-bd" alt="" />
    </div>
    <div class="title">付款信息</div>
    <van-cell-group>
      <van-cell
        style="height: 1.45rem"
        title="户名:"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin value-flex"
      >
        <span>{{ billData.account_name }}</span>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell
        style="height: 1.45rem"
        title="账号:"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>{{ billData.account_number }}</span>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="last">
      <van-cell
        style="height: 1.45rem"
        title="开户行:"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin value-flex"
      >
        <span>{{ billData.open_bank }}</span>
      </van-cell>
    </van-cell-group>
    <span class="tips">{{ billData.tips }}</span>
  </div>
</template>
<script>
//eslint-disable prettier/prettier
import axios from "axios";
// 统一加上headers
axios.interceptors.request.use(
  // eslint-disable-next-line prettier/prettier
  function (config) {
    // Do something before request is sent
    // console.log(config);
    config.headers = {
      version: "v1",
      "api-access-token": "ca87846db16a561b97c767e0624513f947f52345"
    };
    return config;
  },
  // eslint-disable-next-line prettier/prettier
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);
export default {
  data() {
    return {
      billData: {}
    };
  },

  mounted() {
    axios.get("/api/index/config").then(res => {
      console.log(res.data);
      if (res.data.code !== 200) {
        this.$toast(res.data.msg || "出错了哦,请联系技术~");
        return;
      }
      this.billData = res.data.data;
    });
  }
};
</script>
<style lang="less">
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border-bottom-width: 0px !important;
}
.last::after {
  border-bottom-width: 1px !important;
}

// .van-cell::after {
//   // height: 100%;
// }
.detail {
  overflow: hidden;
  min-height: 100vh;
  padding-bottom: 1px;
  box-sizing: border-box;
  .logo {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    margin: 1rem auto 0.8rem;
    overflow: hidden;
    img {
      width: 2rem;
      height: 2rem;
    }
  }
  .title {
    text-align: center;
    font-size: 0.35rem;
    font-weight: bold;
    // color: #ff0000;
    margin-bottom: 0.8rem;
  }
  // .tips {
  //   display: block;
  //   text-align: center;
  //   font-size: 0.25rem;
  //   color: #ff0000;
  //   // margin-left: 20px;
  //   margin-bottom: 0.9rem;
  // }
  .tips {
    // display: block;
    // text-align: center;
    font-size: 0.25rem;
    color: #ff0000;
    margin-left: 20px;
    margin-bottom: 0.9rem;
  }
  .title-class {
    font-size: 0.32rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .value-class {
    font-size: 0.26rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
  .value-margin {
    margin-right: 20px;
  }
  .value-flex {
    flex: 3 !important;
  }
}
</style>
